<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>-->
</head>
<body>
<div id="app">
    <div id="main" style="width: 1000px; height: 700px;"></div>
</div>

</body>
</html>

<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/ajax.js"></script>
<script src="../../js/vue.js"></script>
<script src="../../js/echarts.min.js"></script>
<script>
    new Vue({
        el: '#main',
        data: {
            chartData: []  // 用于接收后端返回的饼图数据
        },
        methods: {
            getData() {
                // 使用Ajax请求后端接口获取饼图数据
                $.ajax({
                    url: "../../order?op=find",
                    type: "GET",
                    dataType: "json",
                    success: function(res) {
                        if (res.code === 200) {
                            // 数据请求成功
                            this.chartData = res.data;

                            // 初始化ECharts实例
                            var myChart = echarts.init(document.getElementById('main'));

                            // 配置项和数据
                            var option = {
                                title: {
                                    text: '淘京商品销售统计',
                                    subtext: '统计维度: 商品类型',
                                    left: 'center'
                                },
                                tooltip: {
                                    trigger: 'item'
                                },
                                legend: {
                                    orient: 'vertical',
                                    left: 'left'
                                },
                                series: [
                                    {
                                        name: '商品类型',
                                        type: 'pie',
                                        radius: '50%',
                                        data: this.chartData,
                                        emphasis: {
                                            itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };

                            // 生成饼图
                            option && myChart.setOption(option);
                        } else {
                            // 数据请求失败
                            console.log(res.msg);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.log("Error:", error);
                    }
                });
            }
        },
        mounted() {
            this.getData();  // 获取后端数据并生成饼图
        }
    });




</script>